<template>
    <div id="main">
        <el-container>
            <el-header>
                <el-menu
                    :default-active="this.$route.path"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleNavSelect"
                    background-color="#003C75"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                >
                    <el-menu-item index="1">职缘</el-menu-item>
                    <el-menu-item index="1" style="">
                        <el-cascader
                            style="width: 100%"
                            placeholder="输入城市名"
                            :options="province"
                            :show-all-levels="false"
                            filterable
                        ></el-cascader
                    ></el-menu-item>
                    <el-menu-item
                        v-for="(item, index) in leftNavList"
                        :index="item.path"
                        :key="index"
                        class="leftNav"
                    >
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                    <el-menu-item class="rightNav">
                        <img src="@/assets/logo.png" />
                        <!-- 用户名下拉菜单 -->
                        <el-dropdown class="user-name">
                            <span class="el-dropdown-link">
                                <span style="color: white">username</span>
                                <i class="el-icon-caret-bottom"></i
                            ></span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>修改密码</el-dropdown-item>
                                <el-dropdown-item command="loginout"
                                    >退出登录</el-dropdown-item
                                >
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-menu-item>
                    <el-menu-item
                        v-for="(item, index) in rightNavList"
                        :index="item.path"
                        :key="index"
                        class="rightNav"
                    >
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </el-menu>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </div>
</template>

<script>
export default {
    name: 'SeekerView',
    data() {
        return {
            province: {
                value: '',
                label: '',
                children: {
                    value: '',
                    children: ''
                }
            },
            leftNavList: [
                {
                    path: '/seekerHome/SeekerHome',
                    title: '首页'
                },
                {
                    path: '/recommend/Recommend',
                    title: '推荐'
                },
                {
                    path: '/seekerSearch/SeekerSearch',
                    title: '搜索'
                },
                {
                    path: '/seekerInterview/SeekerInterView',
                    title: '面试'
                },
              {
                path: '/delver/ResumeDelivery',
                title: '简历投递'
              }
            ],
            rightNavList: [
                {
                    path: '/seekerResume/SeekerResume',
                    title: '简历'
                },
                {
                    path: '/message/MessageView',
                    title: '消息'
                }
            ],
            id: '',
            userType: ''
        }
    },
    mounted() {
        this.$axios.post('/city/allProvinceCity').then((resp) => {
            this.province = resp.data
        })
    },
    created() {
        // 在组件创建时获取传递过来的id值
        this.seekerId = this.$route.query.id;
        this.id = this.$store.state.id
        this.userType = this.$store.state.userType
    },
    methods: {
        handleNavSelect(path) {
            if (this.$route.path !== path) {
                this.$router.push({
                    path: path,
                    query: { id: this.id, userType: this.userType }
                })
            }
        }
    },
    computed: {
        activeIndex() {
            return '/' + this.$route.path.split('/')[1]
        }
    }
}
</script>

<style scoped>
#main {
    width: 1400px;
    margin-right: auto;
    margin-left: auto;
}

.el-header .rightNav {
    display: flex;
    flex-shrink: 0;
    float: right;
}
</style>
